/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    IconButton,
    IconX,
    useToast,
    InputPure,
    SuffixInput,
    Stack,
    StackTitle,
    Popover,
    MenuList,
    MenuItem,
    IconPackage,
    IconRefButton,
    IconMoreVertical, Dialog, InputLine, Button, Input, Select
} from "customize-easy-ui-component";
import {OneUserChoose} from "../../common/user/OneUserChoose";
import {MultUserChoose} from "../../common/user/MultUserChoose";
import {OfficeChoose} from "../../common/user/OfficeChoose";
import {ContainLine} from "../../comp/base";
import {css} from "@emotion/react";
import {Dispatch, SetStateAction} from "react";
import {ModelTypeArr} from "../../report/modelConfigs";
import {getSortedModelVersions, idsTreeSelectMapper} from "../../common/tool";



/**关联对象，从大列表中选择一个对象的，可套用这个伪对话框模式。
 * */
interface FlowReportConfigProps {
    master?: any;
    ispMens?: any[];
    reviewer?: any;
    approver?: any;
    modeltype?: string;
    modelversion?: number;
    setMaster: Dispatch<SetStateAction<any>>;
    setIspMens: Dispatch<SetStateAction<any[]>>;
    setReviewer: Dispatch<SetStateAction<any>>;
    setApprover: Dispatch<SetStateAction<any>>;
    setModeltype: Dispatch<SetStateAction<string>>;
    setModelversion: Dispatch<SetStateAction<number>>;
    models: string[];    //可用报告模板类型 列表，有顺序的。
}

/** 伪对话框的做法！ 两个独立路由页面的接力：搜索选择路由页面传递选中的取值给发起人的编辑器路由页面。这类似于就是redux+router全局状态管理。
 */
export const FlowReportConfig= ({ master, ispMens, reviewer, approver, modeltype, modelversion,
                                    setMaster,setIspMens,setReviewer,setApprover,
                            setModeltype,setModelversion,models}:FlowReportConfigProps) =>
{
    const [versions, setVersions] = React.useState<any[]>(getSortedModelVersions(modeltype as keyof typeof ModelTypeArr));

  return (
      <React.Fragment>

                  <InputLine label={`校核人(点击进入选择):`}>
                      <OneUserChoose  name={master?.person?.name!}   setEditorVar={setMaster}
                                      oobj={master} />
                  </InputLine>
                  <InputLine label={`审核人(点击进入选择):`}>
                      <OneUserChoose  name={reviewer?.person?.name!}   setEditorVar={setReviewer}
                                      oobj={reviewer} />
                  </InputLine>
                  <InputLine label={`审批人(点击进入选择):`}>
                      <OneUserChoose  name={approver?.person?.name!}   setEditorVar={setApprover}
                                      oobj={approver} />
                  </InputLine>
                  <InputLine label={`检验员多人(进入选择):`}>
                      <MultUserChoose  oobj={ispMens} setEditorVar={setIspMens}  />
                  </InputLine>

              <InputLine label={`模板对应报告类型:`}>
                  <Select inputSize="md" css={{minWidth:'210px',fontSize:'1rem',padding:'0 0.2rem'}} divStyle={css`max-width:390px;`}
                          value={modeltype||''}
                          onChange={e => {
                              const selm= e.currentTarget.value  as keyof typeof ModelTypeArr as string;
                              let arvs= getSortedModelVersions(selm);
                              setModeltype(selm);
                              // console.log("选啊里触发的： arvs=", arvs);
                              setVersions(arvs);
                          } }
                  >
                      { (models as [keyof typeof ModelTypeArr]).map((hit ,i:number) => (
                          <option key={i} value={hit as string}>{ModelTypeArr[hit].name}</option>
                      ))}
                      <option value={''}></option>
                  </Select>
              </InputLine>
              <InputLine label={`模板对应版本号:`}>
                  <Select inputSize="md" css={{minWidth:'190px',fontSize:'1rem',padding:'0 0.2rem'}} divStyle={css`max-width:340px;`}
                          value={modelversion||''}
                          onChange={e => setModelversion(e.currentTarget.value as unknown as number) }
                  >
                      { versions?.map((hit:any,i:number) => (
                          <option key={i} value={hit[0]}>{hit[1][0]||''}</option>
                      ))}
                      <option value={''}></option>
                  </Select>
              </InputLine>

      </React.Fragment>
  );
}

